<template>
    <div id="container">
        <mavon-editor class="editClass" v-model="markDownValue" :subfield="propJson.subfield === 'double' ? true : false"
                      :defaultOpen="propJson.defaultOpen" :placeholder="propJson.placeHolder"
                      :editable="propJson.editable" :toolbarsFlag="propJson.toolbarsFlag" :ishljs="propJson.ishljs"
                      :style="execHeight" :toolbars="propJson.toolbars" :info="getMarkDownValue" @change="valueChange" @imgAdd="imgAdd" ref="mdEditor"
                      :box-shadow="propJson.isBoxShadow"/>
    </div>
</template>

<script name="MarkDownComponent" setup lang="ts">
import {doThirdServiceValue, getBuildParam} from "@/utils/lowcode/thirdService";
import {commonParamChange, getCommonParamObj} from "@/utils/commonParamUtil";
import request from '@/utils/request'
import {computed, defineProps, nextTick, ref} from "vue";
import jsonpath from "jsonpath";

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let markDownValue = ref("");

let execHeight = computed(() => {
    let style = "";
    if (propJson.value.height) {
        style += "height: " + propJson.value.height + ";";
    }
    if (propJson.value.editFlag) {
        style += "width: 94%;";
        style += "margin-left: 3%;";
    }
    return style;
})

let getMarkDownValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    let variableObj = getCommonParamObj(commonParam.value, propJson.value.markDownVariable);
    if (variableObj) {
        variableObj.variableValue = {};
    }
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execThen, execCatch, null)
})

function execThen(resValue, execParam) {
    markDownValue.value = resValue;
    nextTick(() => {
        setMarkDownDirToCommonParam();
    });
}

function setMarkDownDirToCommonParam() {
    if (propJson.value.isRelateMarkDownDir) {
        let contextElement = document.getElementsByClassName("v-show-content")
        let variableObj = getCommonParamObj(commonParam.value, propJson.value.markDownVariable);
        let markDownContainer = contextElement[0];
        if (markDownContainer.children.length > 0) {
            variableObj.variableValue = markDownContainer;
        }
    }
}

function execCatch(resValue) {

}

function valueChange(value, render) {
    // 根据当前数据设置到当前变量中
    if (propJson.value.bindVariable) {
        markDownValue.value = value
        commonParamChange(commonParam.value, propJson.value.bindVariable, value);
    }
    if (propJson.value.htmlBindVariable) {
        commonParamChange(commonParam.value, propJson.value.htmlBindVariable, render);
    }
}

const mdEditor = ref(null);
async function imgAdd(pos, $file){
    let url = propJson.value.doUploadAction.apiPath
    let requestType = propJson.value.doUploadAction.apiMethod
    // 构建参数
    let formData = new FormData();
    let uploadImageRequestVariable = propJson.value.imageInnerVariable;
    let fileRequestVariable = uploadImageRequestVariable[0]
    if (fileRequestVariable.variableName) {
        let variableName = fileRequestVariable.variableName;
        if (fileRequestVariable.variableName.startsWith("$.")) {
            variableName = variableName.substring(2, variableName.length);
        }
        formData.append(variableName.toString(), $file)
    }
    let realParam = await getBuildParam(propJson.value.doUploadAction, commonParam.value);
    for (let objName in realParam) {
        formData.append(objName, realParam[objName]);
    }
    request({
        url: url,
        method: requestType,
        data: formData
    }).then(res => {
        let queryInfo = jsonpath.query(res, propJson.value.returnUrlJsonPath)
        let resInfo;
        if (queryInfo instanceof Array) {
            resInfo = queryInfo[0]
        } else {
            resInfo = queryInfo
        }
        // 插入图片 markdown
        mdEditor.value.$img2Url(pos, resInfo);
    })
}
</script>

<style scoped lang="less">
.editClass {

}
</style>